<template>
  <div>
    <!-- 搜索条件 -->
    <div class="box">
      <el-form ref="queryRef" :model="queryForm" label-width="125px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="课程名称：" prop="courseName">
              <el-input v-model.trim="queryForm.courseName" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="课程编码：">
              <el-input v-model.trim="queryForm.courseCode" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态：" prop="courseStatus">
              <el-select v-model="queryForm.courseStatus" class="m-2" placeholder="请选择" filterable clearable>
                <el-option label="启用" :value="1" />
                <el-option label="禁用" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" :loading="searchLoading" @click="getAllCourseInfo(undefined)">
              <icons name="search"></icons>
              搜索
            </el-button>
            <el-button @click="reset()">
              <icons name="reset"></icons>
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- table课表 -->
    <div class="container">
      <div class="btn-group">
        <el-button type="primary" @click="showCurr(undefined)">
          <icons name="icon-increase"></icons>
          新增
        </el-button>
      </div>
      <el-table :data="tableData" v-loading="tableLoading" class="lz-table" border style="width: 100%">
        <el-table-column prop="cur_enCode" label="课程编码" align="center" header-align="center" />
        <el-table-column prop="cur_name" label="课程名称" align="center" header-align="center" />
        <el-table-column prop="cur_statusName" label="启用状态" align="center" header-align="center">
          <template #default="{ row }">
            <span :class="row.cur_statusCode === 1 ? 'enable' : 'disable'">{{ row.cur_statusName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cur_price" label="课程价格" align="center" header-align="center" />
        <el-table-column prop="cur_number" label="预收名额" align="center" header-align="center" />
        <el-table-column prop="cur_weeks" label="课时" align="center" header-align="center" />
        <el-table-column prop="cur_type" label="类型" align="center" header-align="center" />
        <el-table-column label="操作" align="center" header-align="center">
          <template #default="{ row }">
            <el-button type="text" @click="showCurr(row)">编辑</el-button>
            <el-button type="text" @click="deCourse(row.cur_code)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination layout="total, sizes,prev,pager,next,jumper" :page-size="queryForm.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]" :total="total" :current-page.sync="queryForm.page"
          @current-change="hCurrentChange" @size-change="hSizeChange" />
      </div>
    </div>
    <edit-curr-info :valueShow="editCurrShow" :editCurrInfo="editCurrRow" @closeCurr="closeCurr" />
  </div>
</template>
<script lang="ts">
import { queryAllCourseInfo, deleteCourse } from '@/api/teaching/course-manage'
import { defineComponent, reactive, ref } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import editCurrInfo from './components/editCurrInfo.vue'
import { ElMessage } from 'element-plus';
export default defineComponent({
  setup() {
    const { proxy } = useCurrentInstance()
    const searchLoading = ref(false)
    const tableLoading = ref(false)
    const editCurrShow = ref(false)
    const editCurrRow = ref(null)
    const tableData = ref([])
    const queryForm = reactive({
      courseName: '',
      courseStatus: null,
      courseCode: '',
      page: 1,
      pageSize: 10
    })
    const total = ref(0)
    const queryRef: any = ref(null)

    // 展示新增或者编辑弹窗
    const showCurr = (info) => {
      info && (editCurrRow.value = info)
      editCurrShow.value = true
    }

    const closeCurr = (val) => {
      editCurrShow.value = false
      editCurrRow.value = null
      val && getAllCourseInfo(undefined)
    }
    // 分页数据查询方法
    const getAllCourseInfo = (page) => {
      page && (queryForm.page = page)
      tableLoading.value = true
      searchLoading.value = true
      queryAllCourseInfo(queryForm).then((res: any) => {
        tableData.value = res.data.myCourseInfo
        total.value = res.data.total
      }).finally(() => {
        tableLoading.value = false
        searchLoading.value = false
      })
    }

    // 页码改变事件
    const hCurrentChange = (val) => {
      queryForm.page = val
    }

    // 分页大小改变事件
    const hSizeChange = (val) => {
      queryForm.pageSize = val
    }

    // 重置事件
    const reset = () => {
      queryRef.value.resetFields()
    }

    // 删除事件
    const deCourse = (code) => {
      deleteCourse({ code }).then((res: any) => {
        ElMessage.success(res.message)
        getAllCourseInfo(undefined)
      })
    }

    getAllCourseInfo(undefined)
    return {
      editCurrShow,
      searchLoading,
      tableLoading,
      editCurrRow,
      tableData,
      queryForm,
      total,
      queryRef,
      showCurr,
      closeCurr,
      hCurrentChange,
      hSizeChange,
      getAllCourseInfo,
      reset,
      deCourse
    }
  },
  components: { editCurrInfo }
})
</script>
<style scoped lang="scss">
.enable {
  color: #67c23a
}

.disable {
  color: #f56c6c
}

.paging {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>
